<template>
  <span class="tui-clock">
    {{ currentTime }}
  </span>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';
import { timerManager, type TimerId } from '../../common/timer-manager';

// 配置dayjs插件
dayjs.extend(utc);
dayjs.extend(timezone);

// 定义属性
interface Props {
  format?: '24h' | '12h';
  showSeconds?: boolean;
  // 新增一个可选属性：时区
  timezone?: string;
}

const props = withDefaults(defineProps<Props>(), {
  format: '24h',
  showSeconds: true,
  timezone: 'local'
});

// 当前时间
const currentTime = ref('');
let timerId: TimerId;

// 格式化时间函数 - 使用dayjs优化
const formatTime = () => {
  let now = dayjs();

  // 如果指定了时区，则转换到对应时区
  if (props.timezone && props.timezone !== 'local') {
    try {
      // 使用dayjs的utc方法转换到指定时区
      const utcTime = now.utc();
      // 这里我们使用时区偏移量来模拟不同时区，因为完整的时区支持需要额外的插件
      // 在实际项目中，可以安装dayjs/plugin/timezone插件以获得完整的时区支持
      const timezoneOffset = parseFloat(props.timezone);
      if (!isNaN(timezoneOffset)) {
        now = utcTime.add(timezoneOffset, 'hour');
      }
    } catch (error) {
      console.warn(`Invalid timezone format: ${props.timezone}, using local time instead`);
      console.warn('Please use numerical hour offset like "8" for GMT+8');
    }
  }

  // 根据format和showSeconds属性生成格式化字符串
  const formatStr = props.format === '12h'
    ? (props.showSeconds ? 'hh:mm:ss A' : 'hh:mm A')
    : (props.showSeconds ? 'HH:mm:ss' : 'HH:mm');

  // 返回格式化后的时间
  return now.format(formatStr);
};

// 更新时间
const updateTime = () => {
  currentTime.value = formatTime();
  // 递归调用，使用timerManager设置下一次更新
  timerId = timerManager.addTimer(1000, () => {
    updateTime();
  });
};

// 组件挂载时启动定时器
onMounted(() => {
  updateTime(); // 立即更新一次并启动递归定时器
});

// 监听属性变化，重新格式化时间
watch(() => [props.format, props.showSeconds, props.timezone], () => {
  updateTime();
});

// 组件卸载时清除定时器
onUnmounted(() => {
  if (timerId) {
    timerManager.removeTimer(timerId);
  }
});
</script>

<style scoped>
.tui-clock {
  font-family: monospace;
  font-size: inherit;
  color: inherit;
}
</style>